<style scoped>
    .pro-list {
        /* position: relative; */
    }

    .pro-list .footerBox {
        position: relative;
    }

    .pro-con {
        padding: 0 20px;
        margin-bottom: 50px;
    }

    .pro-con .ivu-form-item {
        margin-bottom: 0;
    }

    .hr {
        border: 0;
        background-color: #DEDEDE;
        height: 1px;
        margin: 15px 0;
    }

    .pro-con .ivu-col {
        padding-right: 0 !important;

    }

    .fr {
        float: right;
    }

    .pro-pagesize .mr10 {
        margin-right: 10px;
    }

    .search-h3 {
        font-size: 18px;
        color: #ef8412;
        font-weight: normal;
        margin-bottom: 20px;
    }


    /*//////////////////////////////*/

    .pro-card {
        margin-bottom: 10px;
    }

    .pro-card-head {
        background-color: #e6e7eb;
        line-height: 38px;
        border: 1px solid #ddd;
    }

    .pro-card-title {
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding-left: 20px;
    }

    .pro-card-headr {
        padding-right: 10px;
        text-align: right;
    }

    .pro-card-content {
        clear: both;
    }

    .pro-paramname {
        text-align: center;
        background-color: #e6e7eb;
        font-size: 14px;
        color: #333;
        border-right: 1px solid #ddd;
    }

    .pro-paramvalue {
        padding-left: 30px;
        border-right: 1px solid #ddd;
    }

    .pro-card-contentrow {
        line-height: 40px;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    /* .fr{
    float: right;
} */

    .mb10 {
        margin-bottom: 10px;
    }

    .search-h3 {
        font-size: 18px;
        color: #ef8412;
        font-weight: normal;
        margin-bottom: 20px;
    }

    .search-form {
        border-bottom: 1px solid #d9d9d9;
    }

    .search-form .ivu-col {
        margin-bottom: 15px;
    }

    .clear {
        clear: both;
    }

    .table-theme {
        clear: both;
    }

    .table-action {
        padding-top: 0;
        padding-bottom: 15px;
    }

    .inline-cut {
        margin-left: 15px;
        margin-right: 15px;
        width: 1px;
        height: 25px;
        background-color: #edf2f6;
    }

    .pro-pagesize {
        margin-bottom: 10px;

    }

    .footer {
        position: fixed;
        padding: 0 30px;
        bottom: 0;
        background-color: #FFF;
        box-shadow: -1px -3px 2px #E3E3E3;
    }

    .pro {}

    .pro_head_img {}

    .pro_show_img {
        position: relative;
        height: 120px;
    }

    .close {
        width: 15px;
        height: 15px;
        position: absolute;
        right: 7px;
        top: 7px;
        border-radius: 50%;
        background-color: red;
        color: #FFF;
        line-height: 15px;
        text-align: center;
        cursor: pointer;
    }

    .imgAdd {
        border: 1px dotted #EEEEEE;
        height: 50px;
        margin-top: 10px;
        line-height: 50px;
        text-align: center;
        background-color: #FBFCFE;
    }

    .site-wrapper {
        width: 95%;
        margin: 0 auto;
    }

    .bm-view {
        width: 100%;
        height: 300px;
        margin-bottom: 20px;
    }

    .cropper-wrapper {
        margin-top: 10px;
        height: 400px;
    }

    .cropper-box {
        height: 300px;
    }

    .btn {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        margin: 20px 10px 0px 0px;
        padding: 9px 15px;
        font-size: 14px;
        border-radius: 4px;
        color: #fff;
        background-color: #50bfff;
        border-color: #50bfff;
        transition: all .2s ease;
        text-decoration: none;
        user-select: none;
    }

    .iconclass {
        display: inline-block;
        width: 58px;
        background: #fff;
        border: 1px dashed #dddee1;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: border-color .2s ease;
        height: 58px;
        line-height: 58px;
    }

    .cailiao {
        margin: 10px 0px 15px;
    }

    .cailiao span:first-child {
        display: inline-block;
        width: 20%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        border: 1px solid #A9A9A9;
        border-right: 0;
        text-align: center;
        vertical-align: middle;
        background-color: #FAFAFA;
        font-weight: 500;
    }

    .cailiao .inputBox {
        height: 36px;
        line-height: 34px;
        width: 80%;
        vertical-align: middle;
        padding-left: 5px;
        border: 1px solid #A9A9A9;
        display: inline-block;
    }

    .cailiao .inputBox input {
        border: 0;
        width: 100%;
        outline: none;
    }

    .infoTable {
        border-collapse: collapse;
        width: 100%;
        line-height: 50px;
        font-size: 14px;
    }

    .infoTable td {
        border: 1px solid #E6E6E6;
        padding-left: 15px;

    }

    .infoTable tr td:first-child {
        background-color: #F4F4F4;
        width: 120px;
        font-weight: 600;
    }

    .infoTable tr td:nth-child(3) {
        background-color: #F4F4F4;
        width: 120px;
        font-weight: 600;
    }

    .infoTable tr td:nth-child(2) {
        width: 364px;
    }

    .infoTable2 tr:nth-child(1) td {
        border-top: none;
    }

    .infoTable2 tr td:nth-child(1),
    .infoTable2 tr td:nth-child(3),
    .infoTable2 tr td:nth-child(5) {
        background-color: #F4F4F4;
        width: 120px;
        font-weight: 600;
    }

    .infoTable2 tr td:nth-child(2),
    .infoTable2 tr td:nth-child(4) {
        width: 202px;
    }

    .infoTable2 tr td .clearLheight {
        line-height: inherit;
    }

    .infoTable tr td p {
        line-height: 25px !important;
    }

    .infoBox {
        height: 550px;
        overflow-y: scroll;
    }

    .infoBox p {
        line-height: 25px !important;
    }
</style>
<style>
    .table-theme .run {
        color: #6BB4A5 !important;
    }

    .table-theme .stop {
        color: #FE9C0D !important;
    }

    .table-theme .noRun {
        color: #F0562F !important;
    }

    .duty .ivu-date-picker-rel:after,
    .duty .ivu-select:after {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        width: 35px;
        height: 34px;
        border-left: 1px solid #bebebe;
        background-color: #FAFAFA;
    }

    .duty .ivu-form .ivu-form-item-label {
        border: 1px solid #BEBEBE;
        border-right: 0;
        background-color: #FAFAFA;
    }

    .duty .ivu-select-single .ivu-select-selection,
    .duty .ivu-input {
        height: 36px;
        line-height: 36px;
        border-radius: 0 2px 2px 0;
        border-color: #BEBEBE;
    }

    .duty .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
    .duty .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
        height: 34px;
        line-height: 34px;
        padding-right: 34px;
    }

    .duty .ivu-select-arrow {
        right: 12px;
        z-index: 9;
    }

    .duty textarea.ivu-input {
        height: inherit;
    }

    .modal5 .ivu-modal-footer {
        background-color: #F2F2F2;
    }
</style>
<template>
    <div class="pro-list">
        <product-title></product-title>
        <div class="pro-con">
            <div class="pro-con-f common-box-body">
                <Row>
                    <h3 class="search-h3 huang">
                        快速搜索
                    </h3>
                    <Form :model="searchForm" class="search-form">
                        <Row>
                            <Col :xs="24" :sm="24" :md="24" :lg="7">
                            <Form-item>
                                <i-input placeholder="请输入供应商简称" v-model="searchForm.shortn"></i-input>
                            </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="24" :lg="7">
                            <Form-item>
                                <i-select placeholder="请选择合作类型" :transfer="true" v-model="searchForm.type">
                                    <i-option value="0">不限</i-option>
                                    <i-option value="1">战略合作</i-option>
                                    <i-option value="2">创新合作</i-option>
                                    <i-option value="3">联盟合作</i-option>
                                </i-select>
                            </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="24" :lg="6">
                            <Form-item>
                                <i-select placeholder="请选择合作状态" :transfer="true" v-model="searchForm.status">
                                    <i-option value="0">不限</i-option>
                                    <i-option value="1">合作</i-option>
                                    <i-option value="3">未启动</i-option>
                                    <i-option value="2">暂停</i-option>
                                </i-select>
                            </Form-item>
                            </Col>
                            <Col :xs="24" :sm="24" :md="24" :lg="4" class="table-action">
                            <Button type="warning" v-if="$isShow('parter/create')" size="large" class="fr" icon="plus" @click="addParter">新增供应商</Button>
                            <div style="border-right: 1px solid #EDF2F6;padding-right: 15px;margin-right: 15px;" class="fr">
                                <span class="clear"></span>
                                <Button type="primary" size="large" class="fr" icon="ios-search" @click="search">搜索</Button>
                            </div>
                            </Col>
                            <div class="clear"></div>
                        </Row>
                    </Form>
                </Row>
            </div>
            <div class="table-theme highlight_table">
                <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe
                    highlight-row border :columns="columns1" :data="prolist" class=""></Table>
            </div>
            <div id="footer">
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="16"> &nbsp;
                    <!-- <i-button type="success" class="fl mr10 " :disabled="disabled" >详情</i-button> -->
                    <i-button type="error" class="fl mr10 " :disabled="disabled" @click="remove" v-if="$isShow('parter/delete')">删除</i-button>
                    <i-button type="info" v-if="$isShow('parter/update')" class="fl mr10 " :disabled="disabled" @click="parter_update">编辑</i-button>
                    
                    </Col>
                    <Col :md="24" :lg="8" class="tRight">
                    <Page ref="pages" :total="listTotal" show-total show-sizer :page-size="pagesize" @on-change="pageChange" @on-page-size-change="pageSizeChange"
                        placement="top" class="page"></Page>
                    </Col>
                </Row>
            </div>
        </div>


        <!-- <Spin size="large" fix v-if="spinShow"></Spin> -->
        <!-- <Spin size="large" fix v-if="spinShow"></Spin> -->
        <Modal v-model="modal1" title="查看详情" width="1000px" okText="关闭" cancelText="">
            <div class="infoBox">
                <table class="infoTable">
                    <tr>
                        <td>供应商全称</td>
                        <td colspan="3">{{parterInfo.name}}</td>
                    </tr>
                    <tr>
                        <td>供应商简称</td>
                        <td>{{parterInfo.shortn}}</td>
                        <td>供应商代码</td>
                        <td>{{parterInfo.parter_code}}</td>
                    </tr>
                    <tr>
                        <td>合约开始时间</td>
                        <td>{{parterInfo.contract_start}}</td>
                        <td>合约结束时间</td>
                        <td>{{parterInfo.contract_end}}</td>
                    </tr>
                    <tr>
                        <td>合作类型</td>
                        <td>{{parterInfo.type==1?'战略合作':parterInfo.type==2?'创新合作':parterInfo.type==3?'联盟合作':''}}</td>
                        <td>合作状态</td>
                        <td>{{parterInfo.status==3?'未启动':parterInfo.status==1?'合作':parterInfo.type==2?'暂停':''}}</td>
                    </tr>
                    <tr>

                        <td>官网网址</td>
                        <td>{{parterInfo.website}}</td>
                        <td>服务热线</td>
                        <td>{{parterInfo.tel}}</td>
                    </tr>
                    <tr>

                        <td>注册资本</td>
                        <td>{{parterInfo.regist_capital}}</td>
                        <td>设立时间</td>
                        <td>{{parterInfo.regist_date}}</td>
                    </tr>
                    <tr>
                        <td>总部地址</td>
                        <td>{{parterInfo.addr}}</td>
                        <td>渠道经理服务电话</td>
                        <td>{{parterInfo.service_tel?parterInfo.service_tel:'暂无'}}</td>
                    </tr>

                </table>
                <table class="infoTable infoTable2">
                    <tr>
                        <td>公司简称</td>
                        <td>{{parterInfo.shortn}}</td>
                        <td>APP名称</td>
                        <td>{{parterInfo.app_name}}</td>
                        <td>微信公众号</td>
                        <td>{{parterInfo.wechat_name}}</td>
                    </tr>
                    <tr>
                        <td>公司logo</td>
                        <td>
                            <img :src="parterInfo.logo" style="width:80px;height:80px;margin-top:20px;">
                        </td>
                        <td>APP二维码</td>
                        <td>
                            <img :src="parterInfo.app_qr_code" style="width:80px;height:80px;margin-top:20px;">
                        </td>
                        <td>公众号二维码</td>
                        <td>
                            <img :src="parterInfo.wechat_qr_code" style="width:80px;height:80px;margin-top:20px;">
                        </td>
                    </tr>
                    <tr>
                        <td>公司简介</td>
                        <td colspan="5">
                            <p class="" style="line-height:normal"></p>
                            <!-- {{parterInfo.description}} -->
                            <div v-html="parterInfo.description"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>公司荣誉</td>
                        <td colspan="5">
                            <p class="" style="line-height:normal"></p>
                            <!-- {{parterInfo.honor}} -->
                            <div v-html="parterInfo.honor"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>发展历程</td>
                        <td colspan="5">
                            <p class="" style="line-height:normal"></p>
                            <!-- {{parterInfo.history}} -->
                            <div v-html="parterInfo.history"></div>
                        </td>
                    </tr>
                </table>
            </div>

        </Modal>
    </div>

</template>

<script>
    import productTitle from '../../components/productTitle'

    import {
        getComlist,
        getCompany,
        get_cate_first,
        get_cate_second,
        getCompany1
    } from '../../api/parter'
    import {
        getProList,
        delPro,
        shangjia
    } from '../../api/product_v2'







    import {
        _get_list,
        _delete,
        _get_list2,
        _parter_info
    } from '../../api/parter'






    //新
    export default {
        data() {
            return {
                tableloading: true,
                modal1: false,
                disabled: true,
                columns1: [{
                        type: 'index',
                        title: '序号',
                        width: '60',
                        align: 'center'

                    },
                    {
                        key: 'parter_code',
                        title: '供应商代码'
                    },
                    {
                        key: 'shortn',
                        title: '供应商简称',
                        render: (h, params) => {
                            return h('a', {
                                style: {
                                    cursor: 'pointer',
                                    textDecoration: 'underline'
                                },
                                domProps: {
                                    innerHTML: params.row.shortn
                                },
                                on: {
                                    click: () => {
                                        this.infoTable(params.row.id);
                                    }
                                }
                            })
                        }
                    },
                    {
                        key: 'contract_start',
                        title: '合约起止时间',
                        render: (h, params) => {
                            return h('div', {}, params.row.contract_start + '--' + params.row.contract_end)
                        }
                    },
                    //    {
                    //        key:'contract_end',
                    //        title:'合约结束时间'
                    //    },
                    {
                        key: 'type',
                        title: '合作类型',
                        render: (h, params) => {
                            return h('div', {}, params.row.type == 1 ? '战略合作' : params.row.type == 2 ? '创新合作' :
                                '联盟合作');
                        }
                    },
                    {
                        key: 'status',
                        title: '合作状态',
                        render: (h, params) => {
                            return h('div', {
                                class: params.row.status == 3 ? 'noRun' : params.row.status == 1 ?
                                    'run' : 'stop',
                                domProps: {
                                    innerHTML: params.row.status == 3 ? '未启动' : params.row.status == 1 ?
                                        '合作' : params.row.status == 2 ? '暂停' : ''
                                }
                            });
                        }
                    },
                    {
                        key: 'service_tel',
                        title: '渠道经理服务电话',
                        render: (h, params) => {
                            return h('div', {}, params.row.service_tel ? params.row.service_tel : '暂无');
                        }
                    },
                    {
                        key: 'tel',
                        title: '电话'
                    },
                    {
                        key: 'website',
                        title: '供应商网址'
                    },


                ],
                prolist: [

                ],
                listTotal: 0,
                p: 1,
                pagesize: 10,
                searchForm: {
                    pagesize: 10,
                    p: 1,
                    shortn: '',
                    type: '',
                    status: '1'
                },
                current: {},
                parterInfo: {}
            };
        },
        components: {
            productTitle,
        },
        computed: {},
        created() {

        },
        mounted() {
            // this.$nextTick(function () {
            //     document.getElementById('footer').style.width = getComputedStyle(document.getElementsByClassName('pro-list')[0]).width;
            // })
            this.getList();
        },
        activated() {

            // this.$set('disabled',true);
            // this.all_company();
            // this.get_cate_one();
        },
        methods: {
            tableCurrentChange(currentRow, oldCurrentRow) {
                this.disabled = false;
                this.current = currentRow;
                // this.current.regist_date = this.current.regist_date.slice(0,10);
                console.log(this.current)
                //            this.current.id = currentRow._id
                //            this.current.name = currentRow.name
                //
                //            this.current.status = currentRow.status == 1 ? true : false
                // this.$set(this.current,'status',currentRow.status  == '上架' ? true : false)
                //            console.log( this.current.status)
                //            console.log(currentRow)
            },
            //编辑
            toDetail() {
                this.$router.push({
                    name: 'pro_update',
                    params: {
                        id: this.current.id
                    }
                });
            },

            getList(id) {
                this.searchForm.p = this.p;
                this.searchForm.pagesize = this.pagesize;
                new Promise((resolve, reject) => {
                    _get_list2(this.searchForm).then(response => {
                        if (response.data.err == 0) {
                            this.listTotal = response.data.data.total;
                            this.prolist = response.data.data.list;
                            // this.prolist=[];
                            // this.listTotal = response.data.data.total;
                            // response.data.data.list.map((val,index)=>{
                            //     val.pay_period = val.pay_period.join(',');
                            //     val.period = val.period.join(',');
                            // })
                            // if(id == -1){
                            //     this.$refs['pages'].currentPage = 1
                            // }
                            // this.prolist = response.data.data.list;
                            this.prolist.map(item => {
                                if (item.contract_end) {

                                } else {
                                    item.contract_end = '';
                                }
                                if (item.contract_start) {

                                } else {
                                    item.contract_start = '';
                                }
                            })
                            this.tableloading = false
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            remove() {
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        var _param = {
                            com_mid: this.current._id
                        }
                        new Promise((resolve, reject) => {
                            _delete(_param).then(response => {
                                if (response.data.err == 0) {
                                    // this.getList();
                                    location.reload();
                                } else {
                                    this.$Message.error(response.data.info);
                                }
                                resolve();
                            }).catch(error => {
                                reject(error);
                            });
                        })
                    },
                });

            },
            pageChange(value) {
                this.p = value;
                // let _query = Object.assign({},this.searchForm,{p:value,pagesize: this.pagesize})
                // this.$router.push({name:'pro',query:_query})
                this.getList();
            },
            pageSizeChange(value) {
                this.pagesize = value;
                this.getList();
            },
            addParter() {
                this.$router.push({
                    name: 'com_edit'
                })
            },
            infoTable(id) {
                this.modal1 = true;
                let params = {
                    parter_id: id
                }
                new Promise((rev, rej) => {
                    _parter_info(params).then(res => {
                        if (res.data.err == 0) {
                            this.parterInfo = {}
                            this.parterInfo = res.data.data
                        } else {
                            this.$Message.error(res.data.info);
                        }
                        rev();
                    }).catch(error => {
                        rej(error)
                    })
                })

            },
            parter_update() {
                this.$router.push({
                    name: 'com_edit2',
                    params: {
                        id: this.current.id
                    }
                })
            },
            search() {
                this.p = 1;
                this.getList();
            }

        }

    };
</script>